<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	
  <view class="emergency-contacts-page">
    <!-- 导航栏 -->


    <!-- 搜索框 -->

    <!-- 紧急提示 -->
   

    <!-- 联系人列表 -->
    <view class="contacts-list">
      <view
          class="contact-item"
          v-for="(contact, index) in filteredContacts"
          :key="index"
      >
        <!-- 联系人信息 -->
        <view class="contact-info" >
          <view class="contact-avatar">
            <text class="avatar-text">{{ contact.name.charAt(0) }}</text>
          </view>
          <view class="contact-details">
            <view class="name-relation">
              <text class="contact-name text12">{{ contact.name }}</text>
              <text class="contact-relation text12">{{ contact.relation }}</text>
            </view>
            <view class="contact-phone">
              <text class="iconfont icon-phone"></text>
              <text class="text11">{{ contact.phone }}</text>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="contact-actions">
          <view
              class="edit-btn"
              @click.stop="openEditDialog(index)"
          >
<!--            <text class="iconfont icon-edit"></text>-->
            <wd-icon name="edit-1" size="22px"></wd-icon>
          </view>
          <view
              class="delete-btn"
              @click.stop="showDeleteConfirm(index)"
          >
<!--            <text class="iconfont icon-delete"></text>-->
            <wd-icon name="keyboard-delete" size="22px"></wd-icon>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredContacts.length === 0">
        <text class="iconfont icon-contact"></text>
        <text class="empty-text">暂无联系人</text>
        <view class="empty-add-btn" @click="openAddDialog">
          <text class="iconfont icon-plus"></text>
          <text>添加紧急联系人</text>
        </view>
      </view>
    </view>

    <!-- 添加/编辑联系人弹窗 -->
    <view class="dialog-mask" v-if="dialogVisible" @click="dialogVisible = false"></view>
    <view class="dialog" v-if="dialogVisible">
      <view class="dialog-title">{{ isEditing ? '编辑联系人' : '添加紧急联系人' }}</view>
      <view class="form-container">
        <view class="form-item">
          <text class="form-label">姓名</text>
          <input
              v-model="formData.name"
              placeholder="请输入联系人姓名"
              class="form-input"
              :maxlength="20"
          ></input>
        </view>

        <view class="form-item">
          <text class="form-label">关系</text>
          <input
              v-model="formData.relation"
              placeholder="请输入与本人关系（如：子女、配偶）"
              class="form-input"
              :maxlength="20"
          ></input>
        </view>

        <view class="form-item">
          <text class="form-label">手机号码</text>
          <input
              v-model="formData.phone"
              placeholder="请输入手机号码"
              class="form-input"
              type="number"
              :maxlength="11"
          ></input>
        </view>
      </view>
      <view class="dialog-buttons">
        <view class="dialog-btn cancel-btn" @click="dialogVisible = false">取消</view>
        <view class="dialog-btn confirm-btn" @click="saveContact">确认</view>
      </view>
    </view>

    <!-- 删除确认弹窗 -->
    <view class="dialog-mask" v-if="deleteDialogVisible" @click="deleteDialogVisible = false"></view>
    <view class="dialog small-dialog" v-if="deleteDialogVisible">
      <view class="dialog-title">确认删除</view>
      <view class="dialog-content">确定要删除该紧急联系人吗？删除后将无法恢复。</view>
      <view class="dialog-buttons">
        <view class="dialog-btn cancel-btn" @click="deleteDialogVisible = false">取消</view>
        <view class="dialog-btn confirm-btn" @click="confirmDelete">确认删除</view>
      </view>
    </view>

    <!-- 添加按钮 -->
    <view class="add-btn" @click="openAddDialog">
<!--      <text class="iconfont icon-plus"></text>-->
      <wd-icon name="add-circle" size="22px"></wd-icon>
    </view>
  </view>
</template>

<script setup>
	
import { ref, reactive, computed } from 'vue';
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	const fontSizeStore = useFontSizeStore();

// 联系人数据 - 初始示例数据
const contacts = ref([
  { name: '张明', relation: '儿子', phone: '13800138000' },
  { name: '李芳', relation: '女儿', phone: '13900139000' },
  { name: '王阿姨', relation: '邻居', phone: '13700137000' }
]);

// 状态管理
const searchKeyword = ref('');
const dialogVisible = ref(false);
const deleteDialogVisible = ref(false);
const isEditing = ref(false);
const currentIndex = ref(-1);

// 表单数据
const formData = reactive({
  name: '',
  relation: '',
  phone: ''
});

// 过滤后的联系人列表
const filteredContacts = computed(() => {
  if (!searchKeyword.value) {
    return contacts.value;
  }
  const keyword = searchKeyword.value.toLowerCase();
  return contacts.value.filter(contact =>
      contact.name.toLowerCase().includes(keyword)
  );
});

// 返回上一页
const onBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 搜索处理
const handleSearch = () => {
  // 由computed自动处理过滤逻辑
};

// 清空搜索
const handleClear = () => {
  searchKeyword.value = '';
};

// 打开添加联系人弹窗
const openAddDialog = () => {
  isEditing.value = false;
  currentIndex.value = -1;
  // 重置表单
  formData.name = '';
  formData.relation = '';
  formData.phone = '';
  dialogVisible.value = true;
};

// 打开编辑联系人弹窗
const openEditDialog = (index) => {
  isEditing.value = true;
  currentIndex.value = index;
  // 填充表单数据
  const contact = contacts.value[index];
  formData.name = contact.name;
  formData.relation = contact.relation;
  formData.phone = contact.phone;
  dialogVisible.value = true;
};

// 显示删除确认弹窗
const showDeleteConfirm = (index) => {
  currentIndex.value = index;
  deleteDialogVisible.value = true;
};

// 确认删除
const confirmDelete = () => {
  // 删除选中的联系人
  contacts.value.splice(currentIndex.value, 1);
  // 显示提示
  uni.showToast({
    title: '删除成功',
    icon: 'none'
  });
  // 关闭弹窗
  deleteDialogVisible.value = false;
};

// 保存联系人（新增或修改）
const saveContact = () => {
  // 表单验证
  if (!formData.name.trim()) {
    uni.showToast({ title: '请输入联系人姓名', icon: 'none' });
    return;
  }

  if (!formData.phone.trim()) {
    uni.showToast({ title: '请输入手机号码', icon: 'none' });
    return;
  }

  if (!/^1[3-9]\d{9}$/.test(formData.phone.trim())) {
    uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
    return;
  }

  // 准备联系人数据
  const contact = {
    name: formData.name.trim(),
    relation: formData.relation.trim() || '未填写',
    phone: formData.phone.trim()
  };

  if (isEditing.value) {
    // 编辑模式 - 更新现有联系人
    contacts.value[currentIndex.value] = contact;
    uni.showToast({ title: '修改成功', icon: 'none' });
  } else {
    // 添加模式 - 新增联系人
    contacts.value.unshift(contact);
    uni.showToast({ title: '添加成功', icon: 'none' });
  }

  // 关闭弹窗
  dialogVisible.value = false;
};
</script>

<style lang="less" scoped>
// 变量定义
@primary: #e53e3e;
@primary-light: #fee2e2;
@text-main: #333;
@text-secondary: #666;
@text-light: #999;
@border-color: #eee;
@bg-gray: #f5f5f5;

.emergency-contacts-page {
  background-color: @bg-gray;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid @border-color;

  .back-btn {
    width: 60rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconfont {
      font-size: 36rpx;
      color: @text-main;
    }
  }

  .navbar-title {
    font-size: 34rpx;
    font-weight: 600;
    color: @text-main;
  }
}

// 搜索框
.search-container {
  padding: 16rpx 24rpx;
  background-color: #fff;

  .search-box {
    display: flex;
    align-items: center;
    background-color: @bg-gray;
    border-radius: 60rpx;
    padding: 0 24rpx;
    height: 60rpx;

    .iconfont {
      font-size: 28rpx;
      color: @text-light;
      margin-right: 10rpx;
    }

    .search-input {
      flex: 1;
      height: 100%;
      font-size: 26rpx;
      background: transparent;
      border: none;
      outline: none;
    }

    .clear-btn {
      font-size: 24rpx;
      color: @text-light;
      width: 30rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 紧急提示
.emergency-tip {
  background-color: @primary-light;
  padding: 20rpx 24rpx;
  margin: 20rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;

  .iconfont {
    color: @primary;
    font-size: 28rpx;
  }

  .tip-text {
    font-size: 26rpx;
    color: #c53030;
    margin-left: 12rpx;
    line-height: 1.5;
  }
}

// 联系人列表
.contacts-list {
  padding: 30rpx 20rpx;
}

// 联系人项
.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

// 联系人信息（可点击进入编辑）
.contact-info {
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 20rpx;
}

// 头像
.contact-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-color: @primary-light;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;

  .avatar-text {
    font-size: 36rpx;
    font-weight: 600;
    color: @primary;
  }
}

// 联系人详情
.contact-details {
  .name-relation {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;

    .contact-name {
      font-size: 30rpx;
      font-weight: 500;
      color: @text-main;
      margin-right: 12rpx;
    }

    .contact-relation {
      font-size: 22rpx;
      color: @text-secondary;
      background-color: @bg-gray;
      padding: 2rpx 12rpx;
      border-radius: 20rpx;
    }
  }

  .contact-phone {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: @primary;

    .iconfont {
      margin-right: 8rpx;
      font-size: 24rpx;
    }
  }
}

// 操作按钮
.contact-actions {
  display: flex;
  gap: 15rpx;

  .edit-btn, .delete-btn {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .edit-btn {
    background-color: #f0f7ff;

    .iconfont {
      font-size: 26rpx;
      color: #1890ff;
    }
  }

  .delete-btn {
    background-color: #fff2f0;

    .iconfont {
      font-size: 26rpx;
      color: @primary;
    }
  }
}

// 空状态
.empty-state {
  padding: 100rpx 0;
  text-align: center;

  .iconfont {
    font-size: 100rpx;
    color: @text-light;
    margin-bottom: 30rpx;
    display: block;
  }

  .empty-text {
    font-size: 28rpx;
    color: @text-light;
    margin-bottom: 40rpx;
    display: block;
  }

  .empty-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: @primary;
    border: 2rpx dashed @primary;
    border-radius: 40rpx;
    font-size: 28rpx;
    padding: 15rpx 30rpx;

    .iconfont {
      font-size: 30rpx;
      margin-right: 10rpx;
    }
  }
}

// 添加按钮
.add-btn {
  position: fixed;
  bottom: 60rpx;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: @primary;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 10rpx rgba(229, 62, 62, 0.3);

  .iconfont {
    font-size: 40rpx;
  }
}

// 弹窗样式
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  z-index: 1000;

  &.small-dialog {
    width: 560rpx;
    left: 50%;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20rpx;
  }
}

.dialog-title {
  font-size: 32rpx;
  font-weight: 600;
  color: @text-main;
  text-align: center;
  padding: 10rpx 0 30rpx;
  border-bottom: 1px solid @border-color;
  margin-bottom: 30rpx;
}

.dialog-content {
  font-size: 28rpx;
  color: @text-secondary;
  text-align: center;
  padding: 20rpx 0 40rpx;
  line-height: 1.5;
}

.form-container {
  .form-item {
    margin-bottom: 30rpx;

    .form-label {
      display: block;
      font-size: 28rpx;
      color: @text-secondary;
      margin-bottom: 10rpx;
    }

    .form-input {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: @bg-gray;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
      border: none;
      outline: none;
    }
  }
}

.dialog-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;

  .dialog-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    border-radius: 8rpx;
  }

  .cancel-btn {
    background-color: @bg-gray;
    color: @text-secondary;
  }

  .confirm-btn {
    background-color: @primary;
    color: white;
  }
}
.icon-phone{
	font-size: 17px!important;
}
</style>
